<template>
    <div class="products_preparation">
        <Header/>
        <div class="second_show">
            <div class="img"></div>
            <div class="pages_w1470" v-if="menudatalist">
                <div class="second_show_text preparation">
                    <div class="second-title">
                        <p class="en" v-html="menudata.son[3].alias"></p>
                        <p class="cn">{{menudata.son[3].name}}</p>
                    </div>
                </div>
            </div>
            <i class="tips"></i>
        </div>

        <div class="second_box" v-if="menudatalist">
            <img src="../assets/images/s5.png" class="preparation-r1">
            <img src="../assets/images/customized_hide.png" class="preparation-l1">
            <img src="../assets/images/s6.png" class="preparation-r2">
            <div class="pa-tb-5">
               <div class="second-title align-c opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <p class="en">{{menudatalist[3].son[0].alias}}</p>
                    <p class="cn">{{menudatalist[3].son[0].name}}</p>
                </div>
                <div class="pages_w1470">
                  <!--PC端显示-->
                   <ul class="ul agriculture_list textshowbox_list l1 fl-clr opacityli" data-list="textshowbox" data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
                       <li v-for="(item,index) in menudatalist[3].son[0].data" :key="index" :data-box='index'>
                           <div class="box">
                                <div class="imgshow">
                                    <img :src="$store.state.domain+item.pic">
                                    <div class="t"><p>{{item.name}}</p><p>{{item.alias}}</p></div>
                                </div>
                                <div class="textshow">
                                    <div class="pa" v-html="item.info">
                                    </div>
                                </div>
                            </div>
                       </li>
                   </ul>
                   <!--移动端显示-->
                   <div v-if='isMobile==1'>
                       <div class="textshowbox agriculture"  v-for="(item,index) in menudatalist[3].son[0].data" :key="index" :data-textshowbox='index'>
                           <div class="textshow">
                               <i class="close"></i>
                               <div class="pa" v-html="item.info"></div>
                           </div>
                       </div>
                   </div>
                </div>

               <!--<div class="swiper-animal-show" v-if='isMobile==1'>
                    <swiper :options="swiperOption" class="opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                        <swiper-slide v-for="(item,index) in menudatalist[3].son[0].data" :key="index" >
                            <div class="box" :data-box='index'>
                                <div class="imgshow">
                                    <img :src="$store.state.domain+item.pic">
                                    <p class="t">{{item.name}}</p>
                                </div>
                            </div>
                        </swiper-slide>
                    </swiper>

                    <div class="textshowbox" v-for="(item,index) in menudatalist[3].son[0].data" :key="index" :data-textshowbox='index'>
                        <div class="textshow">
                            <i class="close"></i>
                            <div class="pa" v-html="item.info"></div>
                        </div>
                    </div>

                    <div class="bottom">
                        <div class="a swiper-next"></div>
                        <div class="a swiper-prev"></div>
                        <div class="swiper-pagination"></div>
                    </div>
                    <div class="swiper_more"><img src="../assets/images/more.svg"></div>
                </div>-->

               <div class="second-title align-c opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <p class="en">{{menudatalist[3].son[1].alias}}</p>
                    <p class="cn">{{menudatalist[3].son[1].name}}</p>
               </div>
               <ul class="ul agriculture_list fl-clr opacity" data-list="agriculture" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                   <li v-for="(item,index) in menudatalist[3].son[1].data" :key="index" :data-box='index'>
                       <div class="box">
                            <div class="imgshow">
                                <img :src="$store.state.domain+item.pic">
                                <div class="t"><p>{{item.name}}</p><p>{{item.alias}}</p></div>
                            </div>
                            <div class="textshow">
                                <div class="pa" v-html="item.info"></div>
                            </div>
                        </div>
                   </li>
               </ul>
               <!--移动端显示-->
               <div v-if='isMobile==1'>
                   <div class="textshowbox agriculture"  v-for="(item,index) in menudatalist[3].son[1].data" :key="index" :data-agriculture='index'>
                       <div class="textshow">
                           <i class="close"></i>
                           <div class="pa" v-html="item.info"></div>
                       </div>
                   </div>
               </div>

            </div>
        </div>
        <Footer/>
    </div>
</template>





<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
export default {
    components: {
        Footer,Header
    },
    data () {
        return {
            isMobile:0, //pc:0 web:1
            /*swiperOption:{
                loop: true,
                slidesPerView:2,
                spaceBetween:10,
                pagination: {
                    el: '.swiper-pagination',
                    clickable :true
                },
                navigation: {
                   nextEl: '.swiper-animal-show .swiper-prev',
                   prevEl: '.swiper-animal-show .swiper-next',
                }
            }*/
        }
    },
    computed: {
        menudata() {
            if(JSON.stringify(this.$store.getters.getmenudata(6)).length>100){
                return this.$store.getters.getmenudata(6)
            }else{
                return false
            }
        },
        menudatalist() {
            if(JSON.stringify(this.$store.getters.getmenudatalist(6)).length>100){
                return this.$store.getters.getmenudatalist(6)
            }else{
                return false
            }
        },
        menulistconfig() {
            return this.$store.getters.getmenuconfig
        }
    },
    mounted () {
        if (isMobile()) {
          this.isMobile=1
        } else {
          this.isMobile=0
        }
        $('.second_show .tips').fadeIn(1000)
        $('.second_show').addClass("show")
        setTimeout(function(){
            /*$('.swiper-animal-show .box').on('click',function(){

                $('[data-textshowbox="'+$(this).data('box')+'"]').fadeIn()
            })*/
            $('.textshowbox .close').on('click',function(){

                $('.textshowbox').fadeOut()
            })

            $('[data-list="textshowbox"] li').on('click',function(){
                $('[data-textshowbox="'+$(this).data('box')+'"]').fadeIn()

            })

            $('[data-list="agriculture"] li').on('click',function(){
                $('[data-agriculture="'+$(this).data('box')+'"]').fadeIn()

            })
        },1000)

        function isMobile() {
              let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
              return flag;
        }


    }
}
</script>
